import React, { Component } from 'react'
import { connect } from 'react-redux';
import { getListAction, delListAction } from './store/actions';
import Tab from './components/Tab';

const App = class App extends Component {

  componentWillMount() {
    // 调用redux上的dispatch方法
    this.props.getList();
  }

  render() {
    return (
      <div className="list">
        <Tab {...this.props}></Tab>
      </div>
    )
  }
}

// 把redux中的状态数据映射到组件的props上
const mapStateToProps = (state) => {
  return {
    ...state
  }
}

// 把redux中的disptach方法映射到组件的props上
const mapDispatchToProps = (dispatch) => {
  return {
    getList() {
      // 使用dispatch方法回调异步方法getListAction ,从而获取到api/list上的数据 并且将该数据设置给了state中的list
      dispatch(getListAction())
    },
    delList(id) {
      // 执行异步删除动作 id 为需要删除的某条list的id值
      dispatch(delListAction(id));
    }
  }
}

// 把redux上的状态和disptach方法与组件绑定
export default connect(mapStateToProps, mapDispatchToProps)(App)